<template>
  <div>
    <h1 v-if="loading">loading...</h1>
    <div class="row" v-else-if="!!users.length">
      <div class="card" v-for="user in users" :key="user.id">
        <a href="user.html_url" target="_blank">
          <img src="user.avatar_url" style="width: 100px" />
        </a>
        <p class="card-text">{{ user.login }}</p>
      </div>
    </div>
    <h2 v-else>当前没有内容，请搜索</h2>
  </div>
</template>
<script>
export default {
  name: "List",
  data() {
    return { users: [], loading: false };
  },
  mounted() {
    this.$bur.$on("searchUser", this.setUser);
    this.$bur.$on("isLoading", this.setLoading);
  },
  beforeDestroy() {
    this.$bur.$off("searchUser", this.setUser);
    this.$bur.$off("isLoading", this.setLoading);
  },
  methods: {
    setLoading(flag) {
      // console.log(flag);
      this.loading = flag;
    },
    setUser(users) {
      this.users = users;
    },
  },
};
</script>